import React, { useEffect, useState } from "react";
import { SideBar, List, Ellipsis } from "antd-mobile";
import { loadDataDoctorsAPI, loadDataListAPI } from "../../services/list";
import { useNavigate } from "react-router-dom";
import { dalImg } from "../../utils/tools";
const Lists = () => {
  const nav = useNavigate();
  //职称数据
  const [zcList, setZcList] = useState([]);
  //医生数据
  const [doctors, setDoctors] = useState([]);
  //key值
  const [activeKey, setActiveKey] = useState("1");
  //每一次点击的时候对应的数据
  const [changeList, setChangeList] = useState([]);
  //初始化获取所有职称
  useEffect(() => {
    //获取职称
    loadDataListAPI().then((res) => {
      setZcList([{ name: "全部", id: "1" }, ...res.data]);
    });
    //获取医生
    loadDataDoctorsAPI().then((res) => {
      setDoctors(res.data.list);
      setChangeList(res.data.list);
    });
  }, []);
  useEffect(() => {
    activeKey !== "1"
      ? setChangeList(
          doctors.filter((item) => item.doctorTitleInfo.id === activeKey)
        )
      : setChangeList(doctors);
    // console.log(changeList);
  }, [activeKey]);
  return (
    <div className="list-cc">
      <div className="list-nav">
        <SideBar activeKey={activeKey} onChange={(v) => setActiveKey(v)}>
          {zcList.map((item) => (
            <SideBar.Item title={item.name} key={item.id} />
          ))}
        </SideBar>
      </div>

      <div className="list-main">
        <List header="">
          {changeList.map((item) => (
            <List.Item
              key={item.id}
              clickable
              extra="咨询"
              onClick={(e) => {
                // console.log(e.target.tagName);
                e.target.tagName == "DIV"
                  ? nav(`/dialog/${item.id}`)
                  : nav(`/lists/${item.id}`);
              }}
            >
              <img
                style={{ width: "50px" }}
                src={dalImg(item.avatar)}
                alt={item.name}
              />
              <strong>{item.name}</strong>

              <Ellipsis
                direction="end"
                rows={3}
                content={item.desc}
                // expandText="展开"
                // collapseText="收起"
                style={{ fontSize: "12px", color: "grey" }}
              />
            </List.Item>
          ))}
        </List>
      </div>
    </div>
  );
};
export default Lists;
